<template>
<div>
    <!-- 查询 -->
    <el-popover placement="bottom-start"  trigger="click">
        <el-form :inline="true" :model="searchList" label-width="75px" class="search-panle">
            <el-form-item label="档案号"  ><el-input v-model="searchList.cardId"  ></el-input></el-form-item>
            <el-form-item label="浆员姓名" ><el-input v-model="searchList.providerName" ></el-input></el-form-item>
            <el-form-item label="机器编号" ><el-select v-model="searchList.machineNo"  ><el-option value="" label="【空】"></el-option><el-option v-for="item in machineData" :key="item.id" :value="item.id" :label="item.name"></el-option></el-select></el-form-item>
            <el-form-item label="分配方式" ><el-select v-model="searchList.allotType" ><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData15" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
            <el-form-item label="分配时间" ><el-date-picker v-model="searchList.time" type="daterange"  range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
            <el-button type="primary" @click="searchData" >提交</el-button>
        </el-form>
        <el-button slot="reference" type="primary">查询</el-button>
    </el-popover>
    <!-- 表格 -->
    <!-- <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
        <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
        <el-table-column prop="cardId" label="档案号" sortable min-width="110"></el-table-column>
        <el-table-column prop="providerNoName" label="患者姓名" sortable min-width="120"></el-table-column>
        <el-table-column prop="machineNoName" label="机器编号" sortable min-width="120"></el-table-column>
        <el-table-column prop="allotTypeName" label="分配方式" sortable min-width="130"></el-table-column>
        <el-table-column prop="allotDate" label="分配时间" sortable min-width="180"></el-table-column>
        <el-table-column prop="creatorName" label="分配护士" sortable min-width="120"></el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination> -->
    <el-tabs v-model="mainActiveName" @tab-click="syschRecodeStatus">
      <el-tab-pane label="待分配" name="0">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
              <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.photo" :src="'data:image/png;base64,'+ item.photo" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerNoName}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.sex === '1'? '男':'女'}}&nbsp;{{item.age}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>登记号：{{item.registerNo}}</div>
                      <div style="margin-top:3px;">机器编号:{{item.machineNoName}}</div>
                      <div style="margin-top:3px;">分配方式:{{item.allotTypeName}}</div>
                      <div style="margin-top:3px;">分配护士:{{item.creatorName}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.machineNoName == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已分配
                    </div>
                    <div   v-if="item.machineNoName != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      待分配
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" >
                    编辑
                </div>
              </li>        
          </ul>
        </div>
        <div class="divfooter">
           <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已分配" name="1">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
              <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.photo" :src="'data:image/png;base64,'+ item.photo" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerNoName}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.sex === '1'? '男':'女'}}&nbsp;{{item.age}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>登记号：{{item.registerNo}}</div>
                      <div style="margin-top:3px;">机器编号:{{item.machineNoName}}</div>
                      <div style="margin-top:3px;">分配方式:{{item.allotTypeName}}</div>
                      <div style="margin-top:3px;">分配护士:{{item.creatorName}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.machineNoName == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已分配
                    </div>
                    <div   v-if="item.machineNoName != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      待分配
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" >
                    编辑
                </div>
              </li>        
          </ul>
       </div> 
       <div class="divfooter">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>       
       </div>       
      </el-tab-pane>    
    </el-tabs>
</div>

</template>

<script>
import api from 'plugins/axios/api.js';
export default {
  data() {
    return {
      mainActiveName:'0',
      tableData: [],
      loading:false,
      machineData:[],/** 机器编号*/
      codeData15:[],/**分配方式 */
      searchList: { // 查询
        providerName:null,
        cardId:null,
        startAllotDate:'',
        endAllotDate:'',
        machineNo:null,
        registerNo:null,
        allotType:null,
        time:'',
      },
      //分页相关参数
      pagination:{
        currentPage:1,
        pageSize:10,
        total:0
      }
    }
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    },
    divAutoHeight(){
      return this.$store.state.clientHeight-100;
    },
  },
  created() {
    let self=this;
    this.getData();
    api.getCodeData(15).then(res=>{
      self.codeData15=res.content;
    })
    api.getMachineData().then(res=>{
      self.machineData=res.content;
    })
  },
  methods: {
    syschRecodeStatus(ins){
      let self = this;
      switch (ins.name) {
        case '1':
          // self.search.recodeStatus=1;
          self.getData();
          break;
        case '0':
          // self.search.recodeStatus=0;
          self.getData();
          break;   
        default:
          break;
      }
    },
    getData(data) {
      let _this = this;
      let list = {
          pageSize: _this.pagination.pageSize,
          currentPage: _this.pagination.currentPage,
          providerName:_this.searchList.providerName,
          cardId:_this.searchList.cardId,
          startAllotDate:_this.searchList.time ? _this.timestampToTime(_this.searchList.time[0]).substr(0,10) : "",
          endAllotDate:_this.searchList.time ? _this.timestampToTime(_this.searchList.time[1]).substr(0,10) : "",
          machineNo:_this.searchList.machineNo,
          registerNo:_this.searchList.registerNo,
          allotType:_this.searchList.allotType,
      };
      _this.loading=true;
      api.providerAllot(list).then(res=>{
          _this.loading=false;
          _this.tableData = res.content.records;
          _this.pagination.total= res.content.total;
      },error=>{
            _this.loading=false;
      })
    },
    searchData() {//搜索
      this.pagination.currentPage=1;
      this.getData();
    },
    handleSizeChange(size) {/**分页-每页显示尺寸 */
      this.pagination.currentPage=1;
      this.pagination.pageSize = size;
      this.getData();
    },
    handleCurrentChange(currentPage) {/**分页-跳转第几页 */
      this.pagination.currentPage = currentPage;
      this.getData();
    },
  }
}
</script>

<style scoped>
  .showDataLi{
    width:400px;
    height:200px;
    border:1px solid rgba(0,0,0,0.1);
    background: white;
    box-shadow : 0px 0px 8px rgba(216,216,216,0.9);
    float:left;
    margin-left: 10px;
    margin-top:10px;
    border-radius: 10px;
    overflow-y:hidden;
    cursor:pointer;
  }
  .showDataLi:hover{
    border:1px solid rgba(0,0,0,0.2);
    box-shadow : 0px 0px 13px rgba(0,0,0,0.3);
  }
  
  .showDataTop{
    width:398px;
    height:148px;
  }
  .showDataFoot{
    border-top:1px solid rgba(216,216,216,0.5);
    width:100%;
    height:51px;
    text-align:center;
    line-height:50px;
    background:#F9FAFC;
    font-size:14px;
    color:rgba(0,0,0,0.5);
  }

  .showDataFoot:hover{
      color:#03BC89;
      background:rgba(216,216,216,0.4);
      font-weight:bolder;
  }

  .showDataTopLeft{
    border:0px solid blue;
    width:80px;
    height:82px;
    float:left;
    margin-left:10px;
    margin-top:20px;
    border-radius: 42px;
    overflow-y:hidden;
  }
  .showDataImg{
    width:100%;
    margin-top:-2px;
  }
  .showDataTopCenter{
    width:210px;
    height:100px;
    float:left;
    margin-left:10px;
    margin-top:20px;
  }
  .showDataTopRight{
    width:80px;
    height:148px;
    float:left;
    text-align:center;
  }
  .divTop{
    width:100%;
  }
  .divfooter{
    width:60%;
    height:50px;

  }
</style>